<template>
	<view class="head">
		<image src="../../static/background.jpg" class="bg-img" mode="widthFix"></image>
	</view>
	<view class="form-all">
		<view class="selector">
			<view @click="change('1')" style="margin-right: 10px;">
				<span :class="[{select_text_t:isLogin}]">
					登录
				</span>
			</view>
			<view @click="change('2')">
				<span :class="[{select_text_t:!isLogin}]">
					注册
				</span>
			</view>
		</view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules" class="form-body">
			<uni-forms-item name="name">
				<uni-easyinput prefixIcon="person" type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-from-item name="email" v-show="!isLogin">
				<uni-easyinput prefixIcon="email" type="text" v-model="formData.email" placeholder="请输入邮箱" />
			</uni-from-item>
			<uni-forms-item name="password" style="margin-top: 20px;">
				<uni-easyinput prefixIcon="locked" v-model="formData.password" type="password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit" class="submit">提交</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isLogin: true,
				// 表单数据
				formData: {
					name: '',
					email: '',
					password: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 2,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱地址',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					}
				}
			}
		},
		methods: {
			submit() {
				if (this.isLogin) {
					if (this.formData.name !== "" && this.formData.password !== "") {
						uni.request({
							url: "http://localhost:8000/sign/login",
							method: 'POST',
							data: {
								username: this.formData.name,
								password: this.formData.password
							},
							// //设置请求头
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
							},
							success: (res) => {
								if (res.data.code === '200') {
									uni.showToast({
										duration: 2000,
										title: "登录成功"
									})
									uni.setStorageSync('token', res.data.message.token)
									uni.switchTab({
										url: "../index/index"
									})
								} else {
									uni.showToast({
										title: res.data.error
									})
								}
							}
						})
					} else {
						uni.showToast({
							title: "请输入账号密码",
							icon: "error",
							duration: 2000
						})
					}
				} else {
					if (this.formData.name !== "" && this.formData.email != "" && this.password !== "") {
						uni.request({
							url: "http://localhost:8000/sign/register",
							method: 'POST',
							data: {
								username: this.formData.name,
								password: this.formData.password,
								email: this.formData.email
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
							},
							success: (res) => {
								if (res.data.code === '200') {
									uni.showToast({
										duration: 2000,
										title: "注册成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: res.data.message
									})
								}
							}
						})
					} else {
						uni.showToast({
							title: "请输入信息",
							icon: "error",
							duration: 2000
						})
					}
				}
			},
			change(val) {
				if (val === '1') {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			},
		}
	}
</script>


<style lang="scss">
	.head {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		background-color: blue;

		.bg-img {
			width: 100%;
			height: 100%;
		}
	}

	.form-all {
		position: absolute;
		top: 30%;
		width: 90%;
		left: 5%;
		height: auto;
		border-radius: 10px;
		margin-top: 40px;
		background-color: #fff;
		z-index: 2;

		.selector {
			width: 90%;
			margin: 20px;
			display: flex;
			justify-content: start;
			font-size: 17px;

		}

		.form-body {
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
	}

	.submit {
		width: 60%;
		margin-bottom: 20px;
		background-color: #66b0fc;
		color: white;
	}

	.select_text_t {
		margin-right: 10px;
		margin-left: 10px;
		font-size: 18px;
		color: #66b0fc;
	}
</style>